<template>
  <div class="my-view" ref="outContainer">
    <div class="show-container show-item" ref="showContainer">
      <span v-for="(item, index) of data" :key="index" class="show-item" ref="realContainer">{{ item }}</span>
      <!-- <span v-for="(item, index) of data" :key="'two_' + index" class="show-item">{{ item }}</span> -->
      <!-- <div class="main-view show-item" ref="realContainer">
      </div> -->
      <!-- <div class="senc-view">
        <div v-for="(item, index) of data" :key="index" class="show-item">{{ item }}</div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  mixins: [],
  components: {},
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      animateTime: 10000,
      timer: null
    }
  },
  computed: {},
  watch: {
    data: {
      deep: true,
      handler (){
        this.$nextTick(() => {
          this.calcanimateTime()
        })
      }
    }
  },
  methods: {
    calcanimateTime() {
      let val = 0
      let outContainer = this.$refs.outContainer
      let showContainer = this.$refs.showContainer
      let outContainerHeight = outContainer.clientWidth
      let showContainerHeight = showContainer.clientWidth
      val = (showContainerHeight / outContainerHeight) * 4000
      this.animateTime = val || 100
      this.run()
    },
    run() {
      if (this.timer) {
        clearInterval(this.timer)
      }
      this.drawer()
      this.timer = setInterval(() => {
        this.drawer()
      }, this.animateTime)
    },
    drawer() {
      let outContainer = this.$refs.outContainer
      let showContainer = this.$refs.showContainer
      let realContainer = this.$refs.realContainer
      let offTop = 0
      let lastPositopn = `translate(0px, 0px)`
      if (!outContainer) {
        return
      }
      let outContainerHeight = outContainer.clientWidth
      let showContainerHeight = showContainer.clientWidth
      // if (outContainerHeight >= showContainerHeight) {
      //   return
      // }
      // let realContainerHeight = realContainer.clientWidth
      if (offTop === 0) {
        lastPositopn = `translate(0px, 0px)`
      }
      offTop = showContainerHeight - outContainerHeight
      if(offTop<0) {
        offTop = 0
      }
      let newPostion = `translate(-${offTop}px, 0px)`
      let actionTime = this.animateTime - 1000
      if (actionTime < 0) {
        actionTime = 1000
      }
      var animation = showContainer.animate(
        // 动画关键帧
        [
          { transform: lastPositopn }, // 起始状态
          { transform: newPostion } // 结束状态
        ],
        {
          duration: actionTime, // 动画时长1000毫秒
          easing: 'linear', // 动画缓动函数
          fill: 'forwards' // 动画结束后保持最后一帧状态
        }
      )
      animation.finished
        .then(() => {
          lastPositopn = newPostion
        })
        .catch(() => {
          lastPositopn = `translate(0px, 0px)`
          offTop = 0
        })
      if (offTop + outContainerHeight >= showContainerHeight) {
        lastPositopn = `translate(0px, 0px)`
        offTop = 0
      }
    }
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.calcanimateTime()
    })
  },
  created() {}
}
</script>

<style lang="scss" scoped>
.my-view {
  height: 30px;
  overflow: hidden;
  // border: 1px solid red;
  .show-item {
    line-height: 30px;
    white-space: nowrap;
    float: left;
  }
}
</style>
